<template>
  <div>
    姓名：<input v-model="userName" /> <button @click="changeName">名字后⾯加1</button> {{
      userName }} <br />
    薪⽔：<input type="number" v-model="salary" /> <button @click="addSalary">薪⽔加
      1000</button> {{ salary }}
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
//基础类型⽤ref声明响应式
let userName = ref("王⼀")
let salary = ref(15000)

function changeName() {
  userName.value += "⼀"
  //userName不是响应式的，userName.value才是响应式的。重新定义userName就⽆法双向绑定
  //userName = ref("王⼀⼀")
}
function addSalary() {
  //脚本中操作数据要加.value
  salary.value += 1000
  //观察salary对象结构
  console.log("salary = ", salary)
}
</script>
